import React from 'react';
import {View, Image, TouchableOpacity, StyleSheet} from 'react-native';

const ImageGallery = ({ navigation }) => {

    const NavigateArray = [
        { path: require('../assets/chat.jpg'), to: 'Home' },
        { path: require('../assets/chat.jpg'), to: 'HealthSummary' },
        { path: require('../assets/chat.jpg'), to: 'SettingScreen' },
    ];

    return (
        <View style={styles.container}>
            {NavigateArray.map((item, index) => (
                <View
                    key={index}
                    style={[styles.imageContainer]}
                >
                    <TouchableOpacity
                        style={[styles.imageTouch]}
                        onPress={() => {
                            console.log(navigation)
                            if (item.to) {
                                const destination = item.to.trim().replace(/\s+/g, '');
                                navigation.navigate (destination);
                            }
                        }}
                    >
                        <Image
                            source={item.path}
                            style={styles.image}
                        />
                    </TouchableOpacity>

                </View>
            ))}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginTop: 20,

    },
    imageContainer: {
        flex: 1,
        // borderWidth: 1,
        // borderRadius: 8,
        overflow: 'hidden',
        alignItems: 'center',
        justifyContent: "flex-end",
    },
    imageTouch: {
        width: '100%',
        // borderWidth: 1,
        // backgroundColor: '#fff',
        overflow: 'hidden',
        alignItems: 'center',
        justifyContent: "flex-end",
    },
    image: {
        width: 45,
        height: 45,
        borderRadius: 8,
    },
});

export default ImageGallery;
